<!DOCTYPE html>
<html>
<head>
	<title>Bus/总线/发布订阅/观察者模式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		.fade-enter,
		.fade-leave-to {
			opacity: 0;
		}
		.fade-enter-active,
		.fade-leave-active {
			transition: opacity 3s;
		}
		
		
	</style>
</head>
<body>
	<div id="app">
		<transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">  
			<!-- before-enter是vue自带的生命钩子，即动画执行之前要执行的函数，同理，enter是动画执行时的钩子，after-enter是动画执行完成后的钩子 -->



			<!-- 同样，元素隐藏时的钩子也同理，如before-leave, leave,  after-leave -->
			
			<div v-show="show">
			hello my dear
			</div>
		</transition>
		
		<button @click="handle">改变</button>
		
		
	</div>
</body>
<script type="text/javascript">
	

	var vm = new Vue({
		el:"#app",
		data:{
			show:true
	
		},
		methods:{
			handle:function() {
				this.show = (this.show == true) ? false : true;
			},
			handleBeforeEnter:function(el) {  //el表示要发生动画过渡的元素，即transition包裹的元素
				el.style.color = "red"
			},
			handleEnter:function(el, done) {
				setTimeout(() => {
					el.style.color = "green"  //done是一个函数，即决定什么时候终止动画
				},4000);
				setTimeout(() => {
					done();
				})
			},
			handleAfterEnter:function(el) {
				el.style.color = "#000"
			}
		}

	})



		
</script>
</html>